<script src="/cropper/cropper.js"></script>
<script src="/cropper/canvas-to-blob.js"></script>
<link rel="stylesheet" href="/cropper/cropper.min.css">
<link rel="stylesheet" href="/css/afterLoginPage.css">
<link rel="stylesheet" href="/css/admin/user/profile.css">
<div class="main layui-clear" style="min-height: 600px;position: relative;padding-bottom: 100px;">
    <div class="layui-bar">
        <div class="layui-breadcrumbs">
            <a class="home" href="/"></a>
            <i class="layui-icon">&#xe602;</i>
            <a href="/user/profile.html">个人资料</a>
            <i class="layui-icon">&#xe602;</i>
            <a href="/user/profile.html">我的资料</a>
        </div>
    </div>
    <#include "/apps/user/userTopInformation.html">
        <div class="ukefu-profile-menu">
            <#include "/apps/user/userinfo.html">
        </div>

        <div class="ukefu-profile">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin:10px 20px;">
                <#include "/apps/user/profilemenu.html">
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show" style="width: 500px;">
                            <form method="post" name="avatorForm" class="layui-form" enctype="multipart/form-data">
                                <div class="layui-form-item">
                                    <div class="avatar-add">
                                        <img id="avatorImg" src="/${curruser.fileurl!''}" onerror="this.src='/images/user/default.jpg';this.onerror=null">
                                        <div class="upload-img">
                                            <div class="layui-box layui-btn edit">
                                                <form target="layui-upload-iframe" method="post" key="set-mine" enctype="multipart/form-data" action="/user/upload/">
                                                    <input type="file" class="layui-hide" name="avator" id="LAY-avator" onchange="copperShow(event)">
                                                </form>
                                                <span onclick="layuiOpen()" class="layui-upload-icon">更改</span>
                                            </div>
                                        </div>
                                        <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过1M</p>
                                        <span class="loading"></span>
                                    </div>
                                </div>
                            </form>
                            <form method="post" action="" class="layui-form" id="myForm">
                                <input type="hidden" name="username" value="${curruser.username!''}">
                                <div class="layui-form-item">
                                    <label for="L_username" class="layui-form-label">昵称</label>
                                    <div class="layui-input-inline">
                                        <p style="display: inline-block;line-height: 34px;" class="username">${curruser.username!''}</p>
                                        <span class="check-img"></span>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label for="L_sign" class="layui-form-label">个人签名</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="L_sign" name="memo" autocomplete="off" value="${curruser.memo!''}" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="L_uname" class="layui-form-label">真实姓名</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="L_uname" name="uname" autocomplete="off" value="${curruser.uname!''}" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="L_username" class="layui-form-label">性别</label>

                                    <div class="layui-input-block">
                                        <input type="radio" name="gender" value="0" <#if curruser.gender?? && curruser.gender=="0">checked</#if> title="男">
                                        <input type="radio" name="gender" value="1" <#if curruser.gender?? && curruser.gender=="1">checked</#if> title="女">
                                        <input type="radio" name="gender" value="2" <#if !(curruser.gender??) || curruser.gender=="2">checked</#if> title="保密">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="L_mobile" class="layui-form-label">手机号码</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="L_mobile" name="mobile" autocomplete="off" value="${curruser.mobile!''}" class="layui-input" readOnly="readOnly">
                                        <a onclick="editMobile()" class="editPhone">修改</a>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="L_email" class="layui-form-label">邮箱</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="L_email" name="email" autocomplete="off" value="${curruser.email!''}" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="city" class="layui-form-label">城市</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="city" autocomplete="off" value="${curruser.city!''}" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label for="L_sign" class="layui-form-label">兴趣爱好</label>
                                    <div class="layui-input-block">
                                        <textarea placeholder="随便写些什么刷下存在感" name="interest" autocomplete="off" class="layui-textarea" style="height: 80px;">${curruser.interest!''}</textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label for="L_sign" class="layui-form-label">自我介绍</label>
                                    <div class="layui-input-block">
                                        <textarea placeholder="随便写些什么刷下存在感" name="introduction" autocomplete="off" class="layui-textarea" style="height: 80px;">${curruser.introduction!''}</textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="L_sign" class="layui-form-label"></label>
                                    <div class="layui-input-block layui-clear submit-btn">
                                        <button class="layui-btn" key="set-mine" lay-filter="*" lay-submit>确认修改</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
            </div>
        </div>
</div>
<script>
    var URL = window.URL || window.webkitURL;
    layui.use(['element', 'form'], function() {
        var element = layui.element(),
            form = layui.form();

        form.on('submit(*)', function(data) {
            submitForm();
            return false;
        });

        form.render(); //更新全部
    });


    function submitForm() {
        $.ajax({
            type: 'POST',
            url: '/user/profile/save.html',
            data: $("#myForm").serialize(),
            async: false,
            beforeSend: function() {

            },
            success: function(data) {
                if (data == "0") {
                    layer.alert('用户名已经存在，请重新填写', {
                        icon: 2
                    });
                } else if (data == "1") {
                    layer.closeAll(); //疯狂模式，关闭所有层
                    layer.msg('用户信息修改成功！', {
                        icon: 1
                    });
                }
            }
        })
    }


    //上传完成，获取blob地址预览
    function copperShow(e) {
        var file = e.target.files[0]
        if (file.size <= 1 * 1024 * 1024) {
            blobURL = URL.createObjectURL(file);
            $("#showCopperImg").removeClass("layui-hide");
            $("#showCopperImg .copper-img-show").attr("src", blobURL);
            $("#showCopperImg .copper-img-show").cropper('reset').cropper('replace', blobURL);
        } else {
            layer.msg('最大不能超过1M!', {
                icon: 1
            });
        }
    }


    //打开截图层
    function layuiOpen() {
        var avatorImg = $("#avatorImg").attr("src");
        var htmlImg = '<div id="showCopperImg">' +
            '<img class="copper-img-show" alt="" src="' + avatorImg + '"  onerror="this.src=\'/images/user/default.jpg\';this.onerror=null">' +
            '<div class="show-preview">' +
            '<hr>' +
            '<span>150*150:</span>' +
            '<div class="img-preview preview-lg"></div>' +
            ' <span>100*100:</span>' +
            '<div class="img-preview preview-md"></div>' +
            ' <span>30*30:</span>' +
            '<div class="img-preview preview-sm"></div>' +
            '</div>' +
            '</div>';
        layer.open({
            type: 1,
            skin: 'layui-layer-rim',
            area: ['800px', '600px'],
            btn: ['打开图片', '确定'],
            content: htmlImg,
            success: function(layero, index) { //弹出成功，初始或截图插件
                $(layero).find(".copper-img-show").cropper({
                    aspectRatio: 1,
                    viewMode: 1,
                    preview: '.img-preview', // 预览图的class名
                    ready: function() {
                        croppable = true;
                    }
                });
            },
            yes: function(index, layero) {
                $("#LAY-avator").click();
            },
            btn2: function(index, layero) { //获取截图，转换blob格式
                // 转化为blob后更改src属性，隐藏模态框

                $(layero).find(".copper-img-show").cropper('getCroppedCanvas', {
                    width: 150,
                    height: 150
                }).toBlob(function(callback, type, encoderOptions) {
                    // 转化为blob后更改src属性，隐藏模态框
                    var formData = new FormData();
                    var nameImg = new Date().getTime() + '.jpg';
                    formData.append("avator", callback, nameImg);
                    $.ajax({
                        url: "/user/profile/avator/up.html",
                        type: "post",
                        data: formData,
                        //关闭序列化
                        processData: false,
                        contentType: false,
                        success: function(josn) {
                            if (josn != "error" && josn != "success") {
                                var data = [{
                                    "dataId": "",
                                    "url": "https://www.myboxlab.com/" + josn,
                                    "time": new Date()
                                }];
                                var msg = msgSatatus(data);
                                if (msg == "") {
                                    saveAutor(josn);
                                } else {
                                    layer.msg(msg, {
                                        icon: 2
                                    });
                                }
                            }
                        },
                        error: function(josn) {
                            console.log(josn)
                        },
                    });

                }, "image/jpeg");
            }
        });
    }

    function saveAutor(fileurl) {
        $.ajax({
            url: "/user/profile/avator.html",
            type: "post",
            data: {
                fileurl: fileurl
            },
            success: function(josn) {
                window.location.reload()
            },
            error: function(josn) {
                console.log(josn)
            },
        });
    }
    /* 发送手机验证码 */
    function checkCode(mobile, time, url) {
        if (mobile != '') {
            curCount = '30';
            $(".error-msg").text("")　　 //设置button效果，开始计时 
                    $(".sendCode").addClass("disabledBtn");
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    phoneNum: mobile
                },
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                success: function(data) {
                    if (data == "success") {
                        if (time == "yes") {
                            $(".sendCode").text(curCount + "秒后可重新发送");
                            InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次 
                        }
                        console.log("成功");
                    } else {
                        if (time == "yes") {
                            $(".sendCode").removeClass("disabledBtn"); //启用按钮 
                            $(".sendCode").text("发送验证码");
                        }
                        console.log("失败");
                    }
                }
            })
        }

    }

    function editMobile() {
        var mobile = $("#L_mobile").val();
        checkCode(mobile, 'no', "/sendPWChangeSms");
        var layNewCodeConfirm = layer.confirm("请输入：<input id='oldInput' class='layui-input'><p class='error-msg'></p>", {
            btn: ['确定', '取消'], //按钮
            title: "已发送验证码到  " + mobile,
        }, function() {
            var html = '<div class="new-code" style="margin-bottom: 10px;">' +
                '<input class="form-control" type="text" id="newMobile"  placeholder="新手机号">' +
                '<input class="form-control" type="text" id="telCode"  placeholder="验证码">' +
                '<a class="sendCode" onclick="getNewCode()" >发送验证码</a>' +
                '<p class="error-msg"></p>' +
                '</div>';
            if ($("#oldInput").val() == "") {
                $(".error-msg").text("请输入验证码！")
            } else {
                $.ajax({
                    type: "POST",
                    url: "/checkTelCode",
                    async: false,
                    data: {
                        smsCode: $("#oldInput").val()
                    },
                    success: function(data) {
                        if (data == "error") {
                            $(".error-msg").text("验证码有误，请重新输入！")
                        } else {
                            layer.close(layNewCodeConfirm);
                            var layNewCodeOpen = layer.open({
                                type: 1,
                                skin: 'layui-layer-rim', //加上边框
                                area: ['420px', '260px'], //宽高
                                btn: ['确认修改', '取消'],
                                content: html,
                                yes: function() {
                                    var isreturn;
                                    $.ajax({
                                        type: "POST",
                                        url: "/checkTelCode",
                                        async: false,
                                        title: "修改手机号",
                                        data: {
                                            smsCode: $("#telCode").val()
                                        },
                                        success: function(data) {
                                            if (data == "error") {
                                                $(".error-msg").text("验证码有误，请重新输入！")
                                            } else {
                                                $("#L_mobile").val($("#newMobile").val());
                                                submitForm();
                                            }
                                        }
                                    })
                                },
                                btn2: function(index, layero) {

                                    //return false 开启该代码可禁止点击该按钮关闭
                                }
                            });
                        }
                    }
                })

            }


        }, function() {});
    }

    //手机验证延时发送
    function SetRemainTime() {      
        if (curCount == 0) {                
            window.clearInterval(InterValObj); //停止计时器 
                    
            $(".sendCode").removeClass("disabledBtn"); //启用按钮 
                    
            $(".sendCode").text("重新发送验证码");      
        }      
        else {        
            curCount--;        
            $(".sendCode").text(curCount + "秒后可重新发送");      
        } 
    }

    function getNewCode() {
        var mobile = $("#newMobile").val();
        if (mobile == "") {
            $(".error-msg").text("请输入验证码！")
        } else if (mobile == $("#L_mobile").val()) {
            $(".error-msg").text("新手机号不可与原手机号一样！")
        } else {
            var isreturn = true;
            $.ajax({
                type: "POST",
                url: "/checkoutUser",
                data: {
                    parm: mobile,
                    flag: 3
                },
                async: false,
                success: function(data) {
                    if (data.mobile == "1") {
                        isreturn = false;
                    }
                }
            })
            if (isreturn != true) {
                $(".error-msg").text("该手机号被占用 换个试试");
            } else {
                checkCode(mobile, "yes", "/sendSms");
            }

        }
    }
</script>